<template>
  <!--        对话框-->
    <make-ware-dialog :visible="makeWareDialogVisible" :info="wareInfo" :isEidt="false"
                      @callClosed="handleMakeWareDialogClosed" @callSuccess="handleAddSuccess"/>
    <make-emp-dialog :visible="makeEmpDialogVisible" :wareId="wareInfo.wareId"
                     @callClosed="handleMakeEmpDialogClosed" @callSaveSuccess="handleSaveSuccess"/>
    <make-ware-area-dialog :info="wareAreaInfo" :is-edit="isEdit" :visible="makeWareAreaDialogVisible"
                           :wareId="wareInfo.wareId"
                           @callClosed="handleWareAreaDialogClosed" @callSuccess="handleWareAreaSaveSuccess"/>
    <make-ware-area-set-dialog :area-id="wareAreaId" :visible="makeWareAreaSetDialogVisible"
                               @callClosed="handleWASDialogClosed"
                               @callSaveSuccess="handleWASSaveSuccess"/>

    <template v-if="showDetail">
        <el-page-header @back="goBack">
            <template #content>
                <span class="text-large font-600 mr-3">
                    <input class="input-box" style="font-size: 20px;" :disabled="!allowEditWareInfo"
                           v-model="wareInfo.wareName"/>
                </span>
            </template>
        </el-page-header>
        <div style="margin: 10px">
            <el-descriptions title="基本信息" border>
                <template #extra>
                    <el-button @click="handleUpdate" type="primary">{{
                        allowEditWareInfo ? '保存' : '编辑'
                        }}
                    </el-button>
                </template>
                <el-descriptions-item label="仓库地址">
                    <input class="input-box" :disabled="!allowEditWareInfo" v-model="wareInfo.address"/>
                </el-descriptions-item>
                <el-descriptions-item label="负责人">
                    {{ wareInfo.emp }}
                    <el-link style="float: right" @click="handleBindEmp" type="primary">重新指定</el-link>
                </el-descriptions-item>
                <el-descriptions-item label="仓库面积" width="200">
                    <el-tooltip
                            class="item"
                            effect="dark"
                            content="平方米"
                            placement="top"
                    >
                        <input class="input-box" :disabled="!allowEditWareInfo" type="number" step="0.1"
                               v-model="wareInfo.area"/>
                    </el-tooltip>
                </el-descriptions-item>
                <el-descriptions-item label="仓库状态">
                    <el-switch
                            v-model="wareStatus"
                            active-color="#13ce66"
                            inactive-color="#ff4949"
                            :disabled="!allowEditWareInfo"
                            active-text="启用"
                            inactive-text="禁用"
                    />
                </el-descriptions-item>
                <el-descriptions-item label="备注">
                    <input class="input-box" :disabled="!allowEditWareInfo" v-model="wareInfo.remark"/>
                </el-descriptions-item>
            </el-descriptions>
            <div style="margin-top: 20px;margin-bottom: 20px">
                <el-row justify="space-between">
                    <el-col :span="21">
                        <el-input v-model="queryWareAreaData.wareAreaName"
                                  placeholder="输入库区位置"
                                  style="width: 100%;"></el-input>
                    </el-col>
                    <el-col :span="3">
                        <el-button-group style="float: right">
                            <el-button @click="handleWareAreaSelect" type="primary">
                                <bar-icon :icon="'select'" :width="15" :height="15" :color="'#ffffff'"/>
                            </el-button>
                            <el-button type="default" @click="handleAddWareArea" plain>
                                <bar-icon :icon="'add'" :width="15" :height="15"
                                          :color="'#409eff'"/>
                            </el-button>
                        </el-button-group>
                    </el-col>
                </el-row>
            </div>
        </div>
        <div>
            <el-table
                    :data="areas"
                    height="460"
                    style="width: 100%"
            >
                <el-table-column type="expand">
                    <template #default="scope">
                        <template v-for="item in scope.row.ste">
                            <ste-view style="padding-top: 20px;;padding-left: 50px;padding-right: 50px"
                                      @callOperationSuccess="handleSteOperationSuccess" :info="item"/>
                            <el-divider/>
                        </template>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="areaCode"
                        label="库区编码"
                ></el-table-column>
                <el-table-column
                        prop="areaName"
                        label="库区名称"
                >
                </el-table-column>
                <el-table-column
                        prop="wareArea"
                        label="库区面积"
                >
                </el-table-column>
                <el-table-column
                        prop="areaRemark"
                        label="备注"
                >
                </el-table-column>
                <el-table-column label="操作">
                    <template #default="scope">
                        <div style="width: 60%">
                            <el-row justify="space-between">
                                <el-link type="primary" @click="handleEditWareArea(scope.row)">编辑</el-link>
                                <el-link type="primary" @click="handleAddWareAreaSet(scope.row)">添加</el-link>
                                <el-link type="danger" @click="handleDeleteWareArea(scope.row)">删除</el-link>
                            </el-row>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination @change="handlePageSizeChange" layout="prev, pager, next" :total="areaTotal"/>
        </div>
    </template>
    <template v-else>
        <div>
            <div class="main-title">仓库设置</div>
            <el-row justify="space-between">
                <el-col :span="18">
                    <el-input v-model="queryData.wareName" placeholder="请输入仓库名称" style="width: 800px;"/>
                </el-col>
                <el-col :span="6">
                    <el-button-group style="float: right">
                        <!--                添加-->
                        <el-button @click="handleQuery" type="primary">
                            <bar-icon :icon="'select'" :width="15" :height="15" :color="'#ffffff'"/>
                        </el-button>
                        <el-button @click="handleAdd">
                            <bar-icon :icon="'add'" :width="15" :height="15" :color="'#409eff'"/>
                        </el-button>
                        <el-button type="danger" @click="handleDelete" :disabled="selectionData.length === 0">
                            <bar-icon :icon="'delete'" :width="15" :height="15" :color="'#ffffff'"/>
                        </el-button>
                    </el-button-group>
                </el-col>
            </el-row>
            <el-table
                    height="600"
                    @selectionChange="selectionChanged"
                    :data="tableData">
                <el-table-column type="selection" width="55"/>
                <el-table-column
                        prop="wareName"
                        label="仓库名称">
                </el-table-column>
                <el-table-column
                        prop="address"
                        label="仓库地址">
                </el-table-column>
                <el-table-column
                        prop="area"
                        label="面积">
                </el-table-column>
                <el-table-column
                        prop="headName"
                        label="负责人">
                </el-table-column>
                <el-table-column label="仓库状态">
                    <template #default="scope">
                        <template v-if="scope.row.status === 1">
                            <el-tag type="success">启用</el-tag>
                        </template>
                        <template v-else>
                            <el-tooltip
                                    class="item"
                                    effect="dark"
                                    content="仓库已禁用,点击启用"
                                    placement="left">
                                <el-tag @click="handleUpdateWareStatus(scope.row)" style="cursor:pointer;" type="info">
                                    已禁用
                                </el-tag>
                            </el-tooltip>
                        </template>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="remark"
                        label="备注">
                </el-table-column>
                <el-table-column
                        label="操作">
                    <template #default="scope">
                        <el-tooltip
                                class="item"
                                effect="dark"
                                content="查看详情"
                                placement="left">
                            <bar-icon @click="handleFindMore(scope.row)" style="cursor:pointer;" :icon="'ware-in'"
                                      :width="25" :height="25"
                                      :color="'#409eff'"/>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination @change="handleWarePageSizeChanged" layout="prev, pager, next" :total="wareTotal"/>
        </div>
    </template>
</template>

<script>
import BarIcon from "@/components/widget/icon/BarIcon.vue";
import wareAPI from "@/util/request-md/ware/ware.js";
import MakeWareDialog from "@/components/widget/dialog/MakeWareDialog.vue";
import SteView from "@/views/md/detail/SteView.vue";
import MakeEmpDialog from "@/components/widget/dialog/MakeEmpDialog.vue";
import wareAreaAPI from "@/util/request-md/ware/ware-area.js";
import wareAreaSetAPI from "@/util/request-md/ware/ware-area-set.js";
import MakeWareAreaDialog from "@/components/widget/dialog/MakeWareAreaDialog.vue";
import MakeWareAreaSetDialog from "@/components/widget/dialog/MakeWareAreaSetDialog.vue";
import wareAreaSet from "@/util/request-md/ware/ware-area-set.js";

export default {
    name: "setting.vue",
    components: {MakeWareAreaSetDialog, MakeWareAreaDialog, MakeEmpDialog, SteView, MakeWareDialog, BarIcon},
    watch: {
        'showDetail'(val) {
            this.queryWareAreaData.wareId = this.wareInfo.wareId;
            this.loadAreas();
        }
    },
    data() {
        return {
            activeName: 'manager',
            makeWareDialogVisible: false,
            allowEditWareInfo: false,//是否允许修改仓库信息
            makeWareAreaDialogVisible: false,
            makeWareAreaSetDialogVisible: false,//是否显示添加库位对话框
            tableData: [],
            isEdit: false,
            queryWareAreaData: {
                wareId: -1,
                wareAreaName: '',
                page: 1,
                limit: 10
            },
            areaTotal: 0,
            wareTotal: 0,
            showDetail: false,
            makeEmpDialogVisible: false,
            areas: [],
            selectionData: [],
            queryData: {
                wareName: '',
                status: -1,
                page: 1,
                limit: 13,
            },
            wareStatus: false,//仓库状态
            wareInfo: {
                wareId: -1,
                wareName: '中央仓库',
                address: '市中心花园路1号',
                area: 120.05,
                headId: '1',
                emp: '可可可',
                status: 1,
                remark: '这里存放的东西很重要',
            },
            wareAreaInfo: {},
            wareAreaId: -1,
        }
    },
    methods: {
        loadData() {
            wareAPI.getWareByName(this.queryData, res => {
                if (res.code === 200) {
                    console.log(res.data)
                    this.tableData = res.data;
                } else {
                    this.$message.error(`网络异常:${res.msg}`);
                }
            })
            wareAPI.getWareCount(this.queryData, res => {
                if (res.code === 200) {
                    this.wareTotal = res.data;
                } else {
                    this.$message.error(`网络异常:${res.msg}`);
                }
            })
        },
        handleAddSuccess() {
            this.makeWareDialogVisible = false;
            this.loadData();
        },
        handleQuery() {
            this.loadData();
        },
        handleAdd() {
            this.makeWareDialogVisible = true;
        },
        handleMakeWareDialogClosed() {
            this.makeWareDialogVisible = false;
        },
        goBack() {
            console.log('go back');
            this.showDetail = false;
            this.loadData();
        },
        //库位操作成功回调
        handleSteOperationSuccess() {
            this.loadAreas();
        },
        handleFindMore(data) {
            this.wareInfo = {
                wareId: data.wareId,
                wareName: data.wareName,
                address: data.address,
                area: data.area,
                headId: data.headId,
                emp: data.headName,
                status: data.status,
                remark: data.remark,
            }
            this.wareStatus = data.status === 1;
            this.showDetail = true;
        },
        //重新绑定负责人
        handleBindEmp() {
            this.makeEmpDialogVisible = true;
        },
        handleMakeEmpDialogClosed() {
            this.makeEmpDialogVisible = false;
        },
        //库区查询
        handleWareAreaSelect() {
            this.loadAreas();
        },
        handleSaveSuccess(data) {
            this.wareInfo.emp = data.name;
            this.makeEmpDialogVisible = false;
        },
        //删除库区
        handleDeleteWareArea(data) {
            //提示是否删除，如果是，那么就删除
            this.$confirm('此操作将永久删除该库区, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {

                if (data.ste.length > 0) {
                    this.$message.error('该库区下有库存，无法删除');
                    return;
                }
                // 删除库区
                wareAreaAPI.deleteWareArea(data, res => {
                    if (res.code === 200) {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.loadAreas();
                    } else {
                        this.$message.error(`网络异常:${res.msg}`);
                    }
                })
            })
        },
        handleUpdateWareStatus(data) {
            data.status = 1;
            wareAPI.updateWare(data, (res) => {
                if (res.code === 200) {
                    this.$message({
                        type: 'success',
                        message: '修改成功!'
                    });
                    this.loadAreas();
                } else {
                    this.$message.error(`网络异常:${res.msg}`);
                }
            })
        },
        handlePageSizeChange(currentPage) {
            this.queryWareAreaData.page = currentPage;
            this.loadAreas();
        },
        handleWarePageSizeChanged(currentPage) {
            this.queryData.page = currentPage;
            this.loadData();
        },
        handleUpdate() {
            if (this.allowEditWareInfo) {
                this.wareInfo.status = this.wareStatus ? 1 : 0;
                wareAPI.updateWare(this.wareInfo, res => {
                    if (res.code === 200) {
                        this.$message({
                            type: 'success',
                            message: '成功修改仓库信息'
                        });
                        this.loadAreas();
                    } else {
                        this.$message.error(`网络异常:${res.msg}`);
                    }
                })
            }
            this.allowEditWareInfo = !this.allowEditWareInfo;

        },
        handleWareAreaDialogClosed() {
            this.makeWareAreaDialogVisible = false;
        },
        handleWareAreaSaveSuccess() {
            this.makeWareAreaDialogVisible = false;
            this.loadAreas();

        },
        //编辑库区
        handleEditWareArea(data) {
            this.wareAreaInfo = data;
            this.isEdit = true;
            this.makeWareAreaDialogVisible = true;
        },
        handleAddWareArea() {
            this.isEdit = false;
            this.makeWareAreaDialogVisible = true;
        },
        handleDelete() {
            let ids = [];
            for (let i = 0; i < this.selectionData.length; i++) {
                ids.push(this.selectionData[i].wareId);
            }
            wareAPI.deleteMallWare(ids, (res) => {
                if (res.code === 200) {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.loadData();
                } else {
                    this.$message.error(`网络异常:${res.msg}`);
                }
            })
        },
        //添加库位
        handleAddWareAreaSet(data) {
            this.wareAreaId = data.wareAreaId;
            this.makeWareAreaSetDialogVisible = true;
        },
        handleWASDialogClosed() {
            this.makeWareAreaSetDialogVisible = false;

        },
        handleWASSaveSuccess() {
            this.makeWareAreaSetDialogVisible = false;
            this.loadAreas();
        },
        loadAreas() {
            this.areas = [];
            wareAreaAPI.getWareArea(this.queryWareAreaData, (res) => {
                res.data.map((item) => {
                    wareAreaSetAPI.getWareAreaSet({
                        wareAreaId: item.wareAreaId
                    }, (res) => {
                        if (res.code === 200) {
                            // console.log(item,'>>>>>>>>>>>>>>>>item')
                            // console.log(res.data,'>>>>>>>>>>>>>>>>res.data')
                            let ret = {
                                ...item,
                                ste: res.data
                            }
                            this.areas.push(ret);
                            console.log(this.areas)
                        }
                    })
                })
            });
            wareAreaAPI.getWareAreaCount({wareId: this.wareInfo.wareId}, (res) => {
                if (res.code === 200) {
                    this.areaTotal = res.data;
                }
            })
        },
        selectionChanged(data) {
            for (let i = data.length - 1; i >= 0; i--) {
                if (data[i].status === 0) {
                    this.$message.error('存在禁用的仓库，请先启用仓库');
                    this.selectionData = [];
                    return;
                }
            }
            this.selectionData = data;
        }
    },
    mounted() {
        this.loadData();
    }
}
</script>

<style scoped>
.input-box {
    /* 去除默认样式 */
    border: none;
    outline: none;
    background-color: transparent; /* 使背景透明 */
    font-size: 14px; /* 设置字体大小 */
    padding: 8px; /* 设置内边距 */
    width: 90%;
    border-bottom: 1px solid #e1e1e1; /* 添加底部边框 */
    transition: border-bottom-color 0.3s; /* 添加过渡效果 */

}

/* 当输入框获取焦点时改变底部边框颜色 */
.input-box:focus {
    border-bottom-color: #007bff; /* 举例：蓝色 */
}
</style>